<template>
  <div>
    <van-search v-model="keyword" placeholder="搜索关键词" shape="round" @search="search" @clear="clear" show-action>
      <template #action>
        <div @click="search()">搜索</div>
      </template>
    </van-search>

    <div class="desc">
      {{ data.descrition }}
    </div>

    <PullRefreshScrollLoadList
      ref="prsl"
      class="list"
      :params="{ keywordGroupId: $route.query.id, keyword }"
      :request="getDetailList"
    >
      <template v-slot="list">
        <li class="fxbw li" v-for="(item, index) in list" :key="index">
          <div
            class="blod"
            v-html="
              keyword ? item.keyword.replace(keyword, `<span class='heighlight'>${keyword}</span>`) : item.keyword
            "
          ></div>
          <div
            class="heighlight"
            @click="
              show = true
              focus = item
            "
          >
            加入群聊
          </div>
        </li>
      </template>
    </PullRefreshScrollLoadList>

    <van-dialog v-model="show" :title="focus.codeName">
      <div class="ac mb10">
        <img :src="focus.groupCodeUrl" />
        <div class="">长按二维码添加企业客群</div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { getDetail, getDetailList } from './api'

export default {
  data() {
    return {
      getDetailList,
      data: {},
      focus: {},
      keyword: '',
      show: false,
    }
  },

  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.$toast.loading()
      getDetail(this.$route.query.id)
        .then(({ data }) => {
          this.data = data || {}
        })
        .finally(() => {
          this.$toast.clear()
        })
    },
    search() {
      this.$refs.prsl.getList(1)
    },
    clear() {
      this.keyword = ''
      this.search()
    },
  },
}
</script>

<style lang="less" scoped>
.main {
  background: var(--bg-white, #fff);
  height: 100%;
}
.search {
  padding: 15px 10px 10px;
}
.desc {
  margin: 10px;
  padding: 10px;
  background: var(--bg-black-8, #ccc);
}
.list {
  border-top: 10px solid var(--border-black-10, #f2f2f2);
  margin-top: 10px;
  padding: 0 10px;
}
.li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-black-8, #ccc);
  // & + .li {
  //   border-top: 1px solid var(--border-black-8, #ccc);
  // }
  ::v-deep .heighlight {
    color: @color !important;
  }
}
</style>
